<template>
  <!-- <div>
    <el-table class="list1" :data="itemList" stripe style="width: 90%"  @row-click="playmusic()">
      <el-table-column prop="name" label="标题" width="400"/>
      <el-table-column prop="ar[0].name" label="歌手" width="200" />
      <el-table-column prop="al.name" label="专辑" width="300" />
      <el-table-column prop="dt" label="时间" width="300" />
    </el-table>
  </div> -->
  <div>
    <div>
      <table>
        <tr>
          <th>序号</th>
          <th>标题</th>
          <th>歌手</th>
          <th>专辑</th>
          <th>时间</th>
        </tr>
      </table>
      <table v-for="(item, i) in itemList" :key="i">
        <tr class="tr1" @dblclick="playmusic(i)">
          <td class="td1">
            <span>{{ i + 1 }}</span>
          </td>
          <td class="td2">{{ item.name }}</td>
          <td class="td3">{{ item.ar[0].name }}</td>
          <td class="td4">{{ item.al.name }}</td>
          <td class="td5">{{ item.dt }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import { computed, getCurrentInstance, getCurrentScope, reactive } from "vue";
import { CollectionTag } from "@element-plus/icons-vue";
import { mapMutations, useStore } from "vuex";

export default {
  setup(props) {
    console.log(props);

  },
 
  methods: {
    playmusic: function (i) {
      this.updateplayList(this.itemList);
      this.updateplayListIndex(i)
    },
    ...mapMutations(["updateplayList","updateplayListIndex"]),
  },

  props: ["itemList"]
  }

</script>
<style>
.list1 {
  margin-left: 5%;
}
th {
  padding: 0px 100px 0px 100px;
}
.tr1 {
  display: flex;
  border-top: solid 1px black;
}
td{
  color: rgb(120, 113, 116);
  display: flex;
  align-items: center;
}
.td1 {
  margin-left: 100px;
  width: 30px;
  height: 70px;
}
.td2 {
  margin-left: 200px;
  width: 150px;
  height: 70px;
}
.td3 {
  margin-left: 83px;
  width: 200px;
  height: 70px;
}
.td4 {
  margin-left: 33px;
  width: 200px;
  height: 70px;
}
.td5 {
  margin-left: 30px;
  width: 200px;
  height: 70px;
}
tr:hover
{ 
background-color:gray;
}
</style>